<template>
  <div>
    <headerMiddle title="我的收藏" />
    <post :post ='item' v-for="(item,index) in collectionList" :key="index"/>
  </div>
</template>

<script>
import headerMiddle from "../components/headerMiddle";
import post from '../components/post'
export default {
  components: {
    headerMiddle,
    post
  },
  data() {
    return {
      collectionList: []
    };
  },
  mounted() {
    this.$axios({
      url: "/user_star",
      method: "get"
    }).then(res => {
      // 数据在res.data.data
      console.log(res.data.data);

      // 拿数据
      this.collectionList = res.data.data;

      // 遍历每个收藏
      this.collectionList.forEach(element => {
        element.comment_length = element.cocmments_length
        // element是每一个遍历出来的收藏
        // element.cover是图片
        if (element.cover) {
          //    如果这个图片开头带上了 htttp 我们就知道他是一张普通图片,无需拼接
          // 如果这里没有 http 这个字符串 我们就认为这个图片需要拼接
          element.cover.forEach(element => {
            if (element.url.indexOf("http") < 0) {
              // 没有http的话就拼接
              element.url = this.$axios.defaults.baseURL + elem.url;
            }
          });
        }
      });
    });
  }
};
</script>
<style lang="less" scoped>
.singleCover {
   padding: 5.556vw;
   display: flex;
    border-bottom: 1px solid #eee;
        .left {
            width: 70%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding-right: 2.778vw;
            .info {
                margin-top: 5.556vw;
                color: #888;
                font-size: 14px;
            }
        }
        .right {
            width: 30%; 
            height: 20.556vw;
            overflow: hidden;
            img {
                width: 100%;
                height: auto;
            }
        }
    }


.multipCover {
        padding: 5.556vw;
        border-bottom: 1px solid #eee;
        .cover {
            margin-top: 2.778vw;
            display: flex;
            justify-content: space-between;
            .imgWrapper {
                width: 32%;
                height: 20.556vw;
                overflow: hidden;
                img {
                    width:100%;
                    height: auto;
                }
            }
        }
        .info {
            margin-top: 2.778vw;
            font-size: 3.889vw;
            color: #888;
        }
    }
</style>